<template>
  <view clas="pick-wrapper">
    <view class="pick-list">
      <view class="tips-wrap" v-if="tabType === PICK_TABS_TYPE.UNAPPROPRIATED_COUNT && !pickerStatus">
        <text class="iconfont">&#xe6c7;</text>
        <text class="text">您不是拣货员，不可操作抢单</text>
      </view>
      <view class="tips-wrap" v-if="tabType === PICK_TABS_TYPE.PENDING_COUNT && !pickerStatus">
        <text class="iconfont">&#xe6c7;</text>
        <text class="text">您不是拣货员，不可操作拣货</text>
      </view>
      <view class="tips-wrap" v-if="tabType === PICK_TABS_TYPE.PICKING_COUNT && list.length && pickerStatus" @click="handlePickControls('picking', list)">
        <text class="iconfont">&#xe6c7;</text>
        <text class="text">您目前有拣货任务进行中，点击去查看！</text>
      </view>
      <view class="pick-item" v-if="tabType === PICK_TABS_TYPE.COMPLETE_COUNT">
        <view class="time-text">时间筛选</view>
        <view class="date-wrap"  @click="onCalendar">
          <view class="date-item">
            <view :class="{ active: startDate }">{{ startDate || '开始日期' }}</view>
            <text class="iconfont calendar">&#xe6c6;</text>
          </view>
          <view class="date-item">
            <view :class="{ active: endDate }">{{ endDate || '结束日期' }}</view>
            <text class="iconfont calendar">&#xe6c6;</text>
          </view>
        </view>
        <view class="pick-total">共 <text>{{ orderCount }}</text>个订单，总计：<text>{{ realityGoodsCount }}</text>件商品</view>
      </view>
      <view class="pick-item" v-for="(item, index) in list" :key="index">
        <view class="source">
          <view class="text-box">
            <view class="item-radio" @click="handleCheckItem(item.pickOrderId)" v-if="tabType === PICK_TABS_TYPE.PENDING_COUNT && pickerStatus">
              <u-checkbox :modelValue="inArray(item.pickOrderId, checkedIds)" shape="circle" :activeColor="appTheme.mainBg" />
            </view>
            <text class="symbol">#</text>
            <text class="number">{{ item.orderSeq }}</text>
            <text class="channel" :style="{ backgroundColor: getChannelCls(item.thirdChannelId) }">{{ getAbbreviation(item.thirdChannelId) }}</text>
            <text class="tag">{{ ['及时单', '预约单'][item.isReservation] }}</text>
            <text class="tag other" v-if="item.performanceType === PerformanceTypeEnum.SELF_PICK_UP.value">用户自提</text>
          </view>
          <view class="status" v-if="item.status === PickOrderStatusEnum.WAIT_DISTRIBUTION.value">等待系统指派</view>
          <view class="status" v-if="item.status === PickOrderStatusEnum.PICKING.value">拣货任务中</view>
          <view class="status" v-if="item.status === PickOrderStatusEnum.WAIT_REVIEW.value">已拣货待复核</view>
        </view>
        <view class="delivery">
          <text>预计{{ formatTime(item.expectedDeliveryEndTime) }}</text>
          <text> 前{{ PerformanceTypeEnum.SELF_PICK_UP.value === item.performanceType ? '自提' : '送达' }}</text>
          <text
            class="time"
            :class="{active: formatDiffTime(item.expectedCompletionTime).includes('剩余')}"
            v-if="tabType !== PICK_TABS_TYPE.COMPLETE_COUNT"
          >{{ formatDiffTime(item.expectedCompletionTime) }}</text>
        </view>
        <view class="pick-info">
          <view class="pick-info__left">
            <view class="cell-item">
              <text class="label">创建时间：</text>
              <text class="value">{{ $moment(Number(item.createTime)).format("YYYY-MM-DD HH:mm:ss") }}下单</text>
            </view>
            <view class="cell-item m-top20">
              <text class="label">拣货分类：</text>
              <text
                class="value tags"
                v-for="(cItem, cIndex) in item.categoryList"
                :key="cIndex"
              >
                {{ cItem.categoryName }}
              </text>
            </view>
          </view>
          <view class="pick-info__right" v-if="item.orderingPhone && item.clientPhone">
            <text class="iconfont" @click="handlePhone(item)">&#xe6bd;</text>
          </view>
        </view>
        <view class="remark-tips">备注：缺货时与我电话联系</view>
        <view class="total-wrap">
          <view class="area">
            <text>总数量：</text>
            <text class="value">{{ item.goodsCount }}</text>
          </view>
          <view class="area ml">
            <text>SKU数：</text>
            <text class="value">{{ item.skuCount }}</text>
          </view>
        </view>
        <view class="btn-wrapper">
          <Permission code="ly_hand_designate_picker">
            <u-button
              v-if="item.status === PickOrderStatusEnum.WAIT_DISTRIBUTION.value || item.status === PickOrderStatusEnum.WAIT_TURN.value"
              type="primary"
              :custom-style="customStyle"
              @click="handlePickControls('picker', item)"
            >手动指派拣货员</u-button>
          </Permission>
          <u-button
            v-if="item.status === PickOrderStatusEnum.WAIT_ROB.value && pickerStatus"
            type="primary"
            :custom-style="customStyle"
            @click="handlePickControls('preempt', item)"
          >抢单</u-button>
          <Permission code="ly_recheck">
            <u-button
              v-if="item.status === PickOrderStatusEnum.WAIT_REVIEW.value"
              type="primary"
              :custom-style="customStyle"
              @click="handlePickControls('recheck', item)"
            >复核</u-button>
          </Permission>
        </view>
      </view>
    </view>
    <!-- 日历组件 -->
    <u-calendar
      max-date="2050-01-01"
      v-model="showTime"
      mode="range"
      @change="changeDate"
    ></u-calendar>
    <!-- 拨打电话 -->
    <u-modal
      v-model="showModal"
      title="呼叫用户"
      confirm-text="呼叫"
      show-cancel-button
      :title-style="{ fontWeight: 'bold' }"
      @confirm="confirmModal"
    >
      <view class="call-wrap">
        <view class="channel">{{ channelName }} <text>#{{ currentRow.orderSeq }}</text></view>
        <view class="flex">{{ currentRow.clientName }}(尾号{{ currentRow.orderingPhone?.slice(-4) }})</view>
      </view>
    </u-modal>
  </view>
</template>
<script>
import store from "@/store"
import { diffTime, inArray, formatTime } from '@/utils/util'
import PickOrderStatusEnum from "@/common/enum/order/pickOrderStatus"
import PerformanceTypeEnum from "@/common/enum/order/performanceType"

// 拣货区的type枚举
const PICK_TABS_TYPE = {
  ASSIGN_COUNT: 'assignCount',
  TURN_COUNT: 'turnCount',
  UNAPPROPRIATED_COUNT: 'unappropriatedCount',
  PENDING_COUNT: 'pendingCount',
  PICKING_COUNT: 'pickingCount',
  RECHECK_COUNT: 'reviewCount',
  COMPLETE_COUNT: 'completeCount',
}

export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    },
    tabType: {
      type: String,
      default: ''
    },
    checkedIds: {
      type: Array,
      default: []
    },
    orderCount: {
      type: Number,
      default: 0
    },
    realityGoodsCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      PICK_TABS_TYPE,
      inArray,
      formatTime,
      PickOrderStatusEnum,
      PerformanceTypeEnum,
      customStyle: {
        height: '64rpx',
        padding: '12rpx 24rpx',
        margin: '16rpx 0 0 16rpx',
      },
      startDate: this.$moment().format("YYYY-MM-DD 00:00:00"),
      endDate: this.$moment().format("YYYY-MM-DD 23:59:59"),
      showTime: false,
      showModal: false,
      currentRow: {}
    }
  },
  computed: {
    channels() {
      return store.getters.channels
    },
    allChannels() {
      return store.getters.allChannels
    },
    getChannelCls() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.color
      }
    },
    getAbbreviation() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.abbreviation
      }
    },
    formatDiffTime() {
      return (val) => {
        return diffTime(val)
      }
    },
    channelName() {
      return this.allChannels.find(item => item.channelId === this.currentRow.thirdChannelId)?.channelName
    },
    pickerStatus() {
      return store.getters.pickerStatus
    },
  },
  methods: {
    onCalendar() {
      this.showTime = true
    },
    changeDate(e) {
      this.startDate = this.$moment(e.startDate).format("YYYY-MM-DD 00:00:00")
      this.endDate = this.$moment(e.endDate).format("YYYY-MM-DD 23:59:59")
      this.showTime = false
      this.$emit('search', {
        startDate: this.startDate,
        endDate: this.endDate
      })
    },
    handlePickControls(type, payload) {
      this.$emit('pick-controls', type, payload)
    },
    handleCheckItem(pickOrderId) {
      this.$emit('check', pickOrderId)
    },
    handlePhone(item) {
      this.currentRow = item
      this.showModal = true
    },
    confirmModal() {
      const formatPhone = this.currentRow?.clientPhone.replace(/-/g, ',');
      uni.makePhoneCall({
        phoneNumber: formatPhone,
        success: () => {
          console.log("调用成功!")
        },
        fail: () => {
          console.log("调用失败!")
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pick-list {

  .tips-wrap {
    margin-bottom: 16rpx;
    padding: 18rpx 32rpx;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    border: 2rpx solid var(---Brand3-Disabled, #7DBCFF);
    background: var(---Brand1-light, #E6F4FF);

    .iconfont {
      color: #2D71FD;
    }

    .text {
      margin-left: 16rpx;
      font-size: 24rpx;
    }
  }

  .pick-item {
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;

    .time-text {
      color: #666666;
    }

    .date-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 24rpx 0;

      .date-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        background: #F8F8F8;
        font-size: 24rpx;
        color: #cccccc;
        border-radius: 16rpx;
        width: 320rpx;

        .active {
          color: #333;
        }

        .calendar {
          margin-left: 30rpx;
          color: #999;
          font-size: 30rpx;
        }
      }
    }

    .pick-total {
      color: #333;
      font-size: 28rpx;

      text {
        color: $main-bg;
      }
    }

    .source {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text-box {
        display: flex;
        align-items: center;

        .item-radio {
          width: 50rpx;
        }

        .symbol {
          font-size: 26rpx;
          vertical-align: baseline;
          margin-right: 8rpx;
        }

        .number {
          font-size: 32rpx;
          font-weight: 600;
        }

        .channel {
          font-size: 20rpx;
          padding: 5rpx 8rpx;
          margin-left: 10rpx;
          border-radius: 6rpx;
          background: #25C156;
          color: #fff;
        }

        .tag {
          background: #F0F7FF;
          color: #2D71FD;
          padding: 5rpx 10rpx;
          border-radius: 8rpx;
          font-size: 20rpx;
          margin-left: 8rpx;
        }

        .other {
          background: #E8FFEA;
          color: #00B42A;
        }
      }

      .status {
        font-size: 30rpx;
        font-weight: bold;
      }
    }

    .delivery {
      font-size: 24rpx;
      margin-top: 20rpx;

      .time {
        margin-left: 16rpx;
        color: #F53F3F;

        &.active {
          color: #00B42A;
        }
      }
    }

    .pick-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;

      &__left {
        flex: 1;

        .cell-item {
          font-size: 26rpx;

          .label {
            color: #333;
          }

          .value {
            color: #000
          }

          .tags {
            background: #F7F8FA;
            color: #000000;
            padding: 5rpx 10rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            margin-right: 12rpx;

          }
        }
      }

      &__right {
        width: 64rpx;
        height: 64rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FAFAFA;
        border: 2rpx solid #EEEEEE;

        .iconfont {
          font-size: 30rpx;
        }
      }
    }

    .remark-tips {
      background: #FFF7E8;
      color: #FF7D00;
      font-size: 24rpx;
      padding: 16rpx;
      margin-top: 18rpx;
      border-radius: 8rpx;
    }


    .total-wrap {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      padding-top: 16rpx;
      border-top: 2rpx dashed #eee;

      .area {
        font-size: 24rpx;
        color: #333333;

        .value {
          font-weight: bold;
        }
      }

      .ml {
        margin-left: 48rpx;
      }
    }

    .btn-wrapper {
      margin-top: 18rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
  }
}

.call-wrap {
  padding: 42rpx 24rpx;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .channel {
    max-width: 180rpx;
    flex-shrink: 0;
  }

  .flex {
    flex: 1;
    text-align: right;
    margin-left: 10rpx;
  }
}
</style>
